<template>
  <div class="list-wrapper">
    <div @click="toMain">
      <mt-header fixed :title="categoryTitle">
        <mt-button icon="back" slot="left" @click.stop="goBack">返回</mt-button>
        <!-- <mt-button icon="more" slot="right"></mt-button> -->
      </mt-header>
    </div>

    <div style="margin-top: 40px;">
      <div v-for="item in enterList" :key="item.id" class="item" @click="queryDetail(item.kind, item.id)">
        <div ref="left">
          <div class="row1">
            <div style="display: flex;justify-content: space-between;">
              <div style="margin-right: 15px;">
                <el-tag v-if="item.kind === '培训'">{{ item.kind }}</el-tag>
                <el-tag v-else type="success">{{ item.kind }}</el-tag>
              </div>
              <p class="title" :class="{long : category === '3'}">{{ item.title }}</p>
            </div>
            <div class="type">{{ item.type }}</div>
          </div>
          <div class="row2">
            <div style="display: flex;justify-content: space-between;width: 70%">
              <p style="width: 120px;">
                <i class="fa fa-clock-o" aria-hidden="true"></i>{{ item.time }}</p>
              <p style="margin-left: 8px;">
                <i class="fa fa-map-marker" aria-hidden="true"></i>{{ item.address }}</p>
            </div>
            <p v-if="item.moneny !== null">
              <i class="fa fa-money" aria-hidden="true"></i>{{ item.moneny }}</p>
          </div>
        </div>
        <div v-if="category=== '1'" ref="right">
          <el-button v-if="item.status === '0'" class="status" @click.stop="sign(item.kind, item.id)" round type="warning" plain>签到</el-button>
          <el-button v-else class="status" round type="info" plain disabled>已签到</el-button>
        </div>
        <div v-else-if="category === '2'" ref="right">
          <el-button v-if="item.status === '0'" class="status" @click.stop="enter(item.kind, item.id)" round type="warning" plain>报名</el-button>
          <el-button v-else class="status" round type="info" plain disabled>已报名</el-button>
        </div>
        <div v-else ref="right" style="width: 0px;"></div>
      </div>
      <div v-if="enterList.length === 0" class="none-content">
        <div v-if="category === '1'">
          您还没有报名记录。
        </div>
        <div v-else-if="category === '2'">
          您还没有收藏的记录，赶快去收藏您感兴趣的信息吧。
        </div>
        <div v-else-if="category === '3'">
          您还没有浏览的记录，赶快去看看您感兴趣的信息吧。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/api/axiosApi'
import { Toast } from 'mint-ui'

export default {
  data () {
    return {
      // 我的报名: 1    收藏列表: 2     浏览记录: 3    我的消息：4
      categoryTitle: '我的报名',
      category: '1',
      enterList: []
    }
  },
  methods: {
    toMain () {
      this.$router.replace({
        path: '/',
        query: this.$route.query
      })
    },
    goBack () {
      this.$router.go(-1)
    },
    _getList (category, openId) {
      const _self = this
      const data = {
        studentId: openId,
        type: category
      }
      axios.post('/commons/findCateoryList', data, (data) => {
        _self.enterList = []
        if (!data || (data.apartTimeJobList.length === 0 && data.trainingJobList.length === 0 && data.informationList.length === 0)) {
          return
        }
        // 兼职
        if (data.apartTimeJobList) {
          data.apartTimeJobList.forEach(item => {
            if (item !== null) {
              let temp = {
                id: item.id,
                kind: '兼职',
                title: item.partTimeJobName,
                type: item.typeName,
                time: item.workTime,
                address: item.workLocation,
                moneny: item.salary
              }
              if (_self.category === '1') {
                temp.status = item.signInStatus + ''
              } else if (_self.category === '2') {
                temp.status = (item.applyStatus === null || item.applyStatus + '' === '4') ? '0' : '1'
              }
              _self.enterList.push(temp)
            }
          })
        }
        // 培训
        if (data.trainingJobList) {
          data.trainingJobList.forEach(item => {
            if (item !== null) {
              let temp = {
                id: item.id,
                kind: '培训',
                title: item.trainingName,
                type: item.typeName,
                time: item.trainingStartTime,
                address: item.trainingLocation,
                moneny: item.trainingCost
              }
              if (_self.category === '1') {
                temp.status = item.signInStatus + ''
              } else if (_self.category === '2') {
                temp.status = (item.applyStatus === null || item.applyStatus + '' === '4') ? '0' : '1'
              }
              _self.enterList.push(temp)
            }
          })
        }
        // 咨询
        if (data.informationList) {
          data.informationList.forEach(item => {
            if (item !== null) {
              let temp = {
                id: item.id,
                kind: '资讯',
                title: item.informationTitle,
                type: item.typeName,
                time: item.createAt,
                address: item.publishSchool,
                moneny: null
              }
              _self.enterList.push(temp)
            }
          })
        }
        _self.$nextTick(() => {
          for (let i = 0; i < this.$refs.right.length; i++) {
            _self.$refs.left[i].style.width = (window.innerWidth - _self.$refs.right[i].clientWidth - 23) + 'px'
          }
        })
      })
    },
    sign (type, id) {
      // 签到
      const _self = this
      if (type === '兼职') {
        type = 1
      } else if (type === '培训') {
        type = 2
      } else {
        type = 3
      }
      const openId = localStorage.getItem('openId')
      let data = {
        studentId: openId,
        signInStatus: 1
      }
      if (type === 1) {
        // 兼职
        data.partTimeJobId = id
      } else if (type === 2) {
        data.trainingJobId = id
      }
      console.log(data)
      axios.post('/commons/update', data, (data) => {
        console.log(data)
        Toast('签到成功!')
        for (let i = 0; i < _self.enterList.length; i++) {
          const item = _self.enterList[i]
          if (item.id === id) {
            item.status = '1'
          }
        }
      })
    },
    enter (type, id) {
      //  报名
      const _self = this
      if (type === '兼职') {
        type = 1
      } else if (type === '培训') {
        type = 2
      } else {
        type = 3
      }
      const openId = localStorage.getItem('openId')
      let data = {
        studentId: openId,
        applyStatus: 0
      }
      if (type === 1) {
        // 兼职
        data.partTimeJobId = id
      } else if (type === 2) {
        data.trainingJobId = id
      }
      let count = _self.count
      axios.post('/commons/update', data, (data) => {
        Toast('报名成功!')
        for (let i = 0; i < _self.enterList.length; i++) {
          const item = _self.enterList[i]
          if (item.id === id) {
            item.status = '1'
          }
        }
        count.applyCount++
        _self.$store.commit('changeCount', count)
      })
    },
    queryDetail (kind, id) {
      let type = '1'
      if (kind === '资讯') {
        this.$router.push({
          path: `/wechat/consultationDetail/${id}`,
          query: this.$route.query
        })
      } else {
        if (kind === '培训') type = '2'
        this.$router.push({
          path: `/wechat/homeDetail/${type}/${id}`,
          query: this.$route.query
        })
      }
    }
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'enterList') {
        this.category = this.$route.params.category
        switch (this.category) {
          case '1':
            this.categoryTitle = '我的报名'
            break
          case '2':
            this.categoryTitle = '收藏列表'
            break
          case '3':
            this.categoryTitle = '浏览记录'
            break
          default:
            this.categoryTitle = '我的报名'
        }
        const openId = localStorage.getItem('openId')
        this._getList(this.category, openId)
      }
    }
  },
  mounted () {
    this.category = this.$route.params.category
    switch (this.category) {
      case '1':
        this.categoryTitle = '我的报名'
        break
      case '2':
        this.categoryTitle = '收藏列表'
        break
      case '3':
        this.categoryTitle = '浏览记录'
        break
      default:
        this.categoryTitle = '我的报名'
    }
    const openId = localStorage.getItem('openId')
    this._getList(this.category, openId)
  }
}
</script>

<style lang="stylus" scoped>
@import '~assets/stylus/variable.styl';

.list-wrapper {
  .item {
    display: flex;
    justify-content: space-between;
    padding: 9px 12px;
    background-color: #fff;
    border-bottom: 1px solid $color-border-3;
    margin-bottom: 21px;
    height: 62px;

    .row1 {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      height: 38px;
      line-height: 32px;

      .title {
        font-size: 18px;
        text-align: left;
        line-height: 35px;
        max-width: 145px;
      }

      .title.long {
        max-width: 260px;
      }

      .type {
        font-size: 14px;
        color: $color-text-dark;
      }
    }

    .row2 {
      display: flex;
      justify-content: space-between;
      font-size: 13px;

      p {
        color: $color-text-dark;

        i {
          padding-right: 5px;
        }
      }
    }

    .status {
      width: 52px;
      height: 52px;
      border-radius: 26px;
      padding: 0;
      line-height: 52px;
      text-align: center;
      font-size: 14px;
      margin-top: 6px;
      margin-left: 8px;
    }
  }

  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .none-content {
    text-align: center;
    font-size: 24px;
    margin-top: 129px;
    padding: 28px;
    line-height: 1.4rem;
  }
}
</style>
